<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Widgets in Ruby Qt</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, Widgets, Qt, Ruby, programming, Linux">
<meta name="description" content="In this part of the Ruby Qt tutorial, we will
cover basic widgets.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">

<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Widgets</h1>

<p>
In this part of the Ruby Qt programming tutorial, we will cover basic widgets. 
</p>

<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* NewSquare */
google_ad_slot = "0364418177";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 


<p>
Widgets are basic building blocks of a GUI application. Over the years, several widgets became
a standard in all toolkits on all OS platforms. For example a button, a check box or a scroll bar. 
Qt has a rich set of widgets which covers most of the programming needs.
More specialized widgets can be created as custom widgets. 
</p>


<h2>Qt::CheckBox</h2>

<p>
The <code>Qt::CheckBox</code> is a widget, that has two states. On and Off. 
The On state is visualized by a check mark. It is used to denote some boolean property. 
The Qt::CheckBox widget provides a checkbox with a text label.
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# This program uses Qt::CheckBox
# widget to show/hide the title
# of the window.
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: September 2012

require 'Qt'


class QtApp &lt; Qt::Widget

    slots 'on_toggled(bool)'

    def initialize
        super
        
        setWindowTitle "Qt::CheckBox"
       
        init_ui
       
        resize 250, 150
        move 300, 300

        show
    end
    
    def init_ui
        cb = Qt::CheckBox.new "Show Title", self
        cb.setChecked true
        connect cb, SIGNAL("toggled(bool)"), 
            self, SLOT("on_toggled(bool)")

        cb.move 50, 50

    end
    
    def on_toggled state
        if state
            setWindowTitle "Qt::CheckBox"
        else
            setWindowTitle ""
        end
    end
    
end

app = Qt::Application.new ARGV
QtApp.new
app.exec
</pre>

<p>
In our example, we place a check box on the window. The check box shows/hides the title
of the window. 
</p>

<pre class="explanation">
setWindowTitle "Qt::CheckBox"
</pre>

<p>
During the construction of the window, we set a title for the window. 
</p>

<pre class="explanation">
cb = Qt::CheckBox.new "Show Title", self
</pre>

<p>
The <code>Qt::CheckBox</code> widget is created. The first
parameter of the constructor is its text label. The second parameter
is the parent widget. 
</p>


<pre class="explanation">
cb.setChecked true
</pre>

<p>
The title is visible at the start of the application. So the check box must
be checked too.
</p>

<pre class="explanation">
connect cb, SIGNAL("toggled(bool)"), 
    self, SLOT("on_toggled(bool)")
</pre>

<p>
The <code>toggled</code> signal is emitted when the 
state of a check box changes. When the signal is emitted, we trigger the
<code>on_toggled</code> method. 
</p>

<pre class="explanation">
if state
    setWindowTitle "Qt::CheckBox"
else
    setWindowTitle ""
end
</pre>

<p>
Depending on the state of the check box, we show or hide the title of the 
window. 
</p>


<img src="/img/gui/qtruby/checkbox.png" alt="Qt::CheckBox">
<div class="figure">Figure: Qt::CheckBox</div>


<h2>Qt::Label</h2>

<p>
The <code>Qt::Label</code> widget is used to display text or image. 
No user interaction is available.
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# This program uses Qt::Label widget to 
# show lyrics of a song.
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: September 2012

require 'Qt'


class QtApp &lt; Qt::Widget

    def initialize
        super
        
        setWindowTitle "You know I'm no Good"
       
        init_ui
       
        resize 250, 150
        move 300, 300

        show
    end
    
    def init_ui
       text = "Meet you downstairs in the bar and heard
your rolled up sleeves and your skull t-shirt
You say why did you do it with him today?
and sniff me out like I was Tanqueray\n
cause you're my fella, my guy
hand me your stella and fly
by the time I'm out the door
you tear men down like Roger Moore\n
I cheated myself
like I knew I would
I told ya, I was trouble
you know that I'm no good"

        label = Qt::Label.new text, self
        label.setFont Qt::Font.new "Purisa", 9

        vbox = Qt::VBoxLayout.new
        vbox.addWidget label
        setLayout vbox
    end   
end

app = Qt::Application.new ARGV
QtApp.new
app.exec
</pre>

<p>
Our example shows lyrics of a song in the window. 
</p>

<pre class="explanation">
       text = "Meet you downstairs in the bar and heard
your rolled up sleeves and your skull t-shirt
...
</pre>

<p>
We define a multi line text. 
</p>

<pre class="explanation">
label = Qt::Label.new text, self
label.setFont Qt::Font.new "Purisa", 9
</pre>

<p>
We create the label widget and change its font. 
</p>

<pre class="explanation">
vbox = Qt::VBoxLayout.new
vbox.addWidget label
setLayout vbox
</pre>

<p>
Instead of manually coding the position and size of the
label, we put the label into a box layout. 
</p>


<img src="/img/gui/qtruby/label.png" alt="Qt::Label">
<div class="figure">Figure: Qt::Label</div>


<h2>Qt::LineEdit</h2>

<p>
The <code>Qt::LineEdit</code> is a widget that allows to enter and 
edit a single line of plain text. There are undo/redo, cut/paste and 
drag &amp; drop functions available for a <code>Qt::LineEdit</code> widget. 
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# This program shows text
# which is entered in a Qt::LineEdit
# widget in a Qt::Label widget.
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: September 2012

require 'Qt'


class QtApp < Qt::Widget

    slots 'on_changed(QString)'

    def initialize
        super
        
        setWindowTitle "LineEdit"
       
        init_ui
       
        resize 250, 150
        move 300, 300

        show
    end
    
    def init_ui
    
        @label = Qt::Label.new self

        edit = Qt::LineEdit.new self
        connect edit, SIGNAL("textChanged(QString)"),
            self, SLOT("on_changed(QString)")

        edit.move 60, 100
        @label.move 60, 40

    end
    
    def on_changed text
        @label.setText text
        @label.adjustSize
    end
    
end

app = Qt::Application.new ARGV
QtApp.new
app.exec
</pre>

<p>
In our example we show two widgets. A line edit and a label widget. The text
entered into the line edit is shown in the label widget. 
</p>

<pre class="explanation">
edit = Qt::LineEdit.new self
</pre>

<p>
The <code>Qt::LineEdit</code> widget is created. 
</p>

<pre class="explanation">
connect edit, SIGNAL("textChanged(QString)"),
    self, SLOT("on_changed(QString)")
</pre>

<p>
When we type or delete some text from the line edit, the <code>on_changed</code>
method is triggered. 
</p>

<pre class="explanation">
def on_changed text
    @label.setText text
    @label.adjustSize
end
</pre>

<p>
In the <code>on_changed</code> method, we set the contents of the line edit
to the label widget. The <code>adjustSize</code> method ensures that all
text is visible. 
</p>


<img src="/img/gui/qtruby/lineedit.png" alt="Qt::LineEdit widget">
<div class="figure">Figure: Qt::LineEdit widget</div>


<h2>Toggle buttons</h2>

<p>
Toggle buttons are push buttons with a checkable flag set. Toggle button is a 
button that has two states. Pressed and not pressed. You toggle between these 
two states by clicking on it. There are situations where this functionality fits well. 
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# This program uses toggle buttons to
# change the background colour of
# a widget.
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: September 2012

require 'Qt'


class QtApp &lt; Qt::Widget

    slots 'on_clicked()'

    def initialize
        super
        
        setWindowTitle "Toggle button"
       
        init_ui
       
        resize 300, 180
        move 300, 300

        show
    end
    
    def init_ui

        @color = Qt::Color.new 0, 0, 0

        setGeometry 300, 300, 280, 170
        setWindowTitle "ToggleButton"

        @redb = Qt::PushButton.new 'Red', self
        @redb.setCheckable true
        @redb.move 10, 10

        connect @redb, SIGNAL("clicked()"), SLOT("on_clicked()")
        
        @greenb = Qt::PushButton.new 'Green', self
        @greenb.setCheckable true
        @greenb.move 10, 60

        connect @greenb, SIGNAL('clicked()'), SLOT("on_clicked()")

        @blueb = Qt::PushButton.new "Blue", self
        @blueb.setCheckable true
        @blueb.move 10, 110

        connect @blueb, SIGNAL("clicked()"), SLOT("on_clicked()")
        @square = Qt::Widget.new self
        @square.setGeometry 150, 20, 100, 100
        @square.setStyleSheet "QWidget { background-color: %s }" % @color.name
    end
    
    def on_clicked
        red = @color.red
        green = @color.green
        blue = @color.blue
        
        if @redb.isChecked
            red = 255
        else 
            red = 0
        end
  
        if @greenb.isChecked
            green = 255
        else 
            green = 0
        end

        if @blueb.isChecked
            blue = 255
        else 
            blue = 0
        end
        
        @color = Qt::Color.new red, green, blue

        @square.setStyleSheet("QWidget { background-color: %s }" % @color.name) 
    end
end

app = Qt::Application.new ARGV
QtApp.new
app.exec
</pre>

<p>
In the code example, we use three toggle buttons to change the colour
of a rectangular widget. 
</p>


<pre class="explanation">
@redb = Qt::PushButton.new 'Red', self
@redb.setCheckable true
</pre>

<p>
We create a <code>Qt::PushButton</code> widget. The
<code>setCheckable</code> method changes the push button
into a toggle button. 
</p>

<pre class="explanation">
connect @redb, SIGNAL("clicked()"), SLOT("on_clicked()")
</pre>

<p>
We plug the button into the <code>on_clicked</code> method call.
</p>

<pre class="explanation">
@square = Qt::Widget.new self
@square.setGeometry 150, 20, 100, 100
@square.setStyleSheet "QWidget { background-color: %s }" % @color.name
</pre>

<p>
We create a square widget. We set its size. At the beginning, it is black.
In Qt, we use style sheets to customize the appearance of a widget. 
</p>

<p>
Inside the <code>on_clicked</code> method, we determine the colour value and
update the square widget to a new colour. 
</p>

<pre class="explanation">
red = @color.red
green = @color.green
blue = @color.blue
</pre>

<p>
Here we determine the current colour of the square widget. 
</p>

<pre class="explanation">
if @redb.isChecked
    red = 255
else 
    red = 0
end
</pre>

<p>
The red part of the colour is changed, depending on the state of the red 
toggle button.
</p>

<pre class="explanation">
@color = Qt::Color.new red, green, blue
</pre>

<p>
We create a new colour value.
</p>

<pre class="explanation">
@square.setStyleSheet("QWidget { background-color: %s }" % @color.name) 
</pre>

<p>
The colour of the square is updated. 
</p>

<img src="/img/gui/qtruby/togglebuttons.png" alt="Toggle buttons">
<div class="figure">Figure: Toggle buttons</div>


<h2>Qt::ComboBox</h2>

<p>
The <code>Qt::ComboBox</code>  is a widget that allows the 
user to choose from a list of options. It is a selection widget 
that displays the current item, and can pop up a list of selectable items.
A combo box may be editable. It presents a list of options to the user in 
a way that takes up the minimum amount of screen space.
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# This program uses the Qt::ComboBox widget.
# The option selected from the combo box is
# displayed in the label widget.
#
# author: Jan Bodnar
# website: www.zetcode.com
# last modified: Sepetmber 2012

require 'Qt'


class QtApp &lt; Qt::Widget

    slots 'on_activated(QString)'

    def initialize
        super
        
        setWindowTitle "Qt::ComboBox"
       
        init_ui
       
        resize 250, 150
        move 300, 300

        show
    end
    
    def init_ui
    
        @label = Qt::Label.new "Ubuntu", self

        combo = Qt::ComboBox.new self

        combo.addItem "Ubuntu"
        combo.addItem "Fedora"
        combo.addItem "Mandriva"
        combo.addItem "Red Hat"
        combo.addItem "Mint"

        connect combo, SIGNAL("activated(QString)"),
            self, SLOT("on_activated(QString)")
        
        combo.move 50, 30
        @label.move 50, 100

    end
    
    def on_activated text
        @label.setText text
        @label.adjustSize
    end
    
end

app = Qt::Application.new ARGV
QtApp.new
app.exec
</pre>

<p>
In our code example, we have two widgets. A combo box and a label widget. 
The option selected from a combo box is shown in the label. 
</p>

<pre class="explanation">
@label = Qt::Label.new "Ubuntu", self
</pre>

<p>
This is the label, that will show the currently selected option
from the combo box. 
</p>

<pre class="explanation">
combo = Qt::ComboBox.new self
</pre>

<p>
We create the instance of the <code>Qt::ComboBox</code> widget. 
</p>

<pre class="explanation">
combo.addItem "Ubuntu"
combo.addItem "Fedora"
combo.addItem "Mandriva"
combo.addItem "Red Hat"
combo.addItem "Mint"
</pre>

<p>
Combo box is filled with values. 
</p>

<pre class="explanation">
connect combo, SIGNAL("activated(QString)"),
    self, SLOT("on_activated(QString)")
</pre>

<p>
When we select an option from the combo box, the <code>on_activated</code> method
is triggered. 
</p>

<pre class="explanation">
def on_activated text
    @label.setText text
    @label.adjustSize
end
</pre>

<p>
In the <code>on_activated</code> method, we update the label widget to the 
currently selected string from the combo box. 
</p>


<img src="/img/gui/qtruby/combobox.png" alt="Qt::ComboBox widget">
<div class="figure">Figure: Qt::ComboBox widget</div>


<p>
In this part of the Ruby Qt tutorial, we have presented several Qt widgets. 
</p>


<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>



<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified September 30, 2012  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>


